<template>
  <div>
    <h3>注册</h3>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="账号" prop="username" class="aa">
    <el-input type="username" v-model="ruleForm.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password" class="aa">
    <el-input type="password" v-model="ruleForm.password"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="mobile" class="aa">
    <el-input v-model="ruleForm.mobile"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">注册</el-button>
    &emsp;<a href="/login">已有账号？点击登录</a>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
import Axios from 'axios'
export default {
  name: "",
  data() {
    return {
        ruleForm: {
          username: '',
          password: '',
          mobile: ''
        },
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {},

  methods: {
     submitForm(){
        Axios.post('http://127.0.0.1:5000/users/register', this.ruleForm)
        .then(res=>{
            console.log("注册用户的响应:",res.data)
            if (res.data.code == 200){
                this.$notify({
                title: '成功',
                message: '注册成功,快去登录吧...',
                type: 'success',
            })
            this.$router.push('/login')
            }else{
                this.$notify.error({
                title: '错误',
                message: res.data.message
        });
            }   
        }).catch(err=>{
            console.log(err)
        })
      },
    Login(){
        this.$router.push('/login')
    }
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
.aa{
    width: 400px;
}
</style>
